<template>
  <div class="dev_card_list" v-if="newList.length" v-init-screen-h="1">
    <!-- :autoplay="false" -->
    <el-carousel
      :interval="8000"
      :autoplay="false"
      style="height: 100%;"
      indicator-position="none"
      arrow="always"
    >
      <el-carousel-item
        v-for="(li, i) in newList"
        :key="i"
        style="height: 100%;"
      >
        <el-row :gutter="8" style="height: 100%;">
          <el-col
            :span="6"
            :offset="0"
            v-for="(item, index) in li"
            :key="index"
            style="margin-bottom: 8px;"
            :style="{
              height: screenWidth ? '32.5%' : '48%'
            }"
          >
            <div class="dev_card_item flex-y" style="height: 100%;">
              <div class="dev_card_title_box w100 flex-x flex-space">
                <div class="flex-x">
                  <div class="dev_card_title">设备: {{ item.deviceName }}</div>
                  <div
                    class="dev_card_state flex-x flex-center"
                    :style="{
                      borderColor: statusColor(item.deviceStatus)
                    }"
                  >
                    <div
                      :style="{
                        backgroundColor: statusColor(item.deviceStatus)
                      }"
                      class="dev_card_state_dot"
                    ></div>
                    <span
                      class="status_text"
                      :style="{
                        color: statusColor(item.deviceStatus)
                      }"
                    >
                      {{ statusText(item.deviceStatus) }}
                    </span>
                  </div>
                </div>
                <el-popover placement="right" width="1150" trigger="click">
                  <el-table
                    :data="item.taskDownLoadInfo"
                    size="mini"
                    border
                    v-if="item.taskDownLoadInfo"
                  >
                    <el-table-column type="expand">
                      <template slot-scope="scope">
                        <FormulaTable
                          v-if="
                            scope.row.formulaParameter &&
                              scope.row.formulaParameter.length
                          "
                          :formulaParameter="scope.row.formulaParameter"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      type="index"
                      width="50"
                      label="序号"
                      align="center"
                    />
                    <el-table-column
                      show-overflow-tooltip
                      prop="taskNumber"
                      label="任务号"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.taskNumber }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="state"
                      label="状态"
                      align="center"
                    >
                      <!-- <template slot-scope="scope">
                        {{ checkTaskStatus(scope.row.taskStatus) }}
                      </template> -->
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="lastOutTime"
                      label="时间"
                      align="center"
                      width="120"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.createdDate | formatDate }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="partNumber"
                      label="零件号"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.partName }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="batchNumber"
                      label="批次号"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.batchNumber }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="processNumber"
                      label="工序号"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.processNumber }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="processName"
                      label="工序名称"
                      width="120"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.processName }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="partTotalCount"
                      label="数量"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.partTotalCount }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="materialMark"
                      label="材料牌号"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.materialMark }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      show-overflow-tooltip
                      prop="craftVersion"
                      label="工艺版次"
                      align="center"
                    >
                      <template slot-scope="scope">
                        {{ scope.row.craftVersion }}
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button
                    slot="reference"
                    type="text"
                    style="margin-left: 6px;"
                    size="mini"
                    :disabled="
                      !item.taskDownLoadInfo || !item.taskDownLoadInfo.length
                    "
                  >
                    查看任务
                  </el-button>
                </el-popover>
              </div>
              <div
                class="dev_card_content flex-x flex-space flex-inherit"
                style="flex: 1;"
              >
                <!-- PV -->
                <div class="dev_card_content_item flex-y flex-center flex-top">
                  <img
                    src="@/assets/images/c_pv.png"
                    alt=""
                    class="dev_card_content_item_icon"
                  />
                  <div class="flex-y flex-center h-full">
                    <div>{{ item.firstRealTemp || "--" }}℃</div>
                    <div
                      style="margin: 6px 0;"
                      v-if="[2, 3].includes(tempCount(item.tempAreaCount))"
                    >
                      {{ item.secondRealTemp || "--" }}℃
                    </div>
                    <div v-if="[3].includes(tempCount(item.tempAreaCount))">
                      {{ item.thirdRealTemp || "--" }}℃
                    </div>
                  </div>
                </div>
                <div class="dev_card_content_item flex-y flex-center  flex-top">
                  <img
                    src="@/assets/images/c_sv.png"
                    alt=""
                    class="dev_card_content_item_icon"
                  />
                  <div class="flex-y flex-center  h-full">
                    <div>{{ item.firstRealTemp || "--" }}℃</div>
                    <div
                      style="margin: 6px 0;"
                      v-if="[2, 3].includes(tempCount(item.tempAreaCount))"
                    >
                      {{ item.secondRealTemp || "--" }}℃
                    </div>
                    <div v-if="[3].includes(tempCount(item.tempAreaCount))">
                      {{ item.thirdRealTemp || "--" }}℃
                    </div>
                  </div>
                </div>
                <!-- 设定时间 -->
                <div class="dev_card_content_item flex-y flex-center flex-top">
                  <img
                    src="@/assets/images/c_t.png"
                    alt=""
                    class="dev_card_content_item_icon"
                  />
                  <!-- <div>
                13号
              </div> -->
                  <div
                    class="h-full  flex-y flex-center"
                    style="text-align: center;"
                  >
                    <!-- 1h 30min -->
                    {{ toHoursAndMinutes(item.programSetTime) }}
                  </div>
                </div>
                <!-- 剩余时间 -->
                <div class="dev_card_content_item flex-y flex-center  flex-top">
                  <img
                    src="@/assets/images/c_t2.png"
                    alt=""
                    class="dev_card_content_item_icon"
                  />
                  <div
                    class="h-full flex-y flex-center"
                    style="text-align: center;"
                  >
                    {{ toHoursAndMinutes(item.programRemainTime) }}
                  </div>
                </div>
              </div>
              <!-- 任务信息 -->
              <!-- v-if="getaskInfoLs(item.taskDownLoadInfo)" -->
              <div class="w100">
                <div
                  class="dev_card_item_task flex-x flex-space"
                  style="justify-content: space-around;"
                >
                  <div class="dev_card_item_task_text">
                    {{
                      getaskInfoLs(item.taskDownLoadInfo)
                        ? getaskInfoLs(item.taskDownLoadInfo).partNumber
                        : "--"
                    }}
                  </div>
                  <el-divider direction="vertical"></el-divider>
                  <div class="dev_card_item_task_text">
                    {{
                      getaskInfoLs(item.taskDownLoadInfo)
                        ? getaskInfoLs(item.taskDownLoadInfo).partName
                        : "--"
                    }}
                  </div>
                  <el-divider direction="vertical"></el-divider>
                  <div class="dev_card_item_task_text">
                    {{
                      getaskInfoLs(item.taskDownLoadInfo)
                        ? getaskInfoLs(item.taskDownLoadInfo).processNumber
                        : "--"
                    }}
                  </div>
                </div>
                <!-- meter1RunStageNO -->
                <!-- {{ item.meter1RunStageNO }} -->
                <el-steps
                  :active="item.meter1RunStageNO"
                  finish-status="success"
                >
                  <el-step
                    v-for="s in getFormulaDownloadInfo(item)"
                    :key="s.id"
                    title=""
                  ></el-step>
                  <!-- <el-step title=""></el-step>
                  <el-step title=""></el-step>
                  <el-step title=""></el-step>
                  <el-step title=""></el-step>
                  <el-step title=""></el-step> -->
                </el-steps>

                <!-- 装炉时间 - 运行时间  -->
                <dv-percent-pond
                  ref="dvBorder"
                  :config="item.config"
                  style="width:100%;height:16px;margin-top: 2px;"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
let client = null;
import { getCentralizedShops } from "@/api/centralized";
import { DEVICE_STATE } from "../constant";
import FormulaTable from "@/components/formulaTable";
export default {
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened": {
      handler: function(newData, oldData) {
        setTimeout(() => {
          if (this.$refs.dvBorder) {
            this.$refs.dvBorder.forEach(item => {
              item.initWH();
            });
          }
        }, 500);
      }
    }
  },
  components: {
    FormulaTable
  },
  props: {
    resultArray: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 获取当前执行中任务的配方
    getFormulaDownloadInfo() {
      return function(row) {
        const info = this.getaskInfoLs(row.taskDownLoadInfo);
        if (!info) {
          return [];
        }
        const formulas = [];
        const map = new Map();
        row.formulaDownloadInfo.forEach(ele => {
          if (ele.formulaDownid == info.formulaDownid) {
            formulas.push(ele);
          }
        });
        return formulas;
      };
    },
    // 正在执行的任务
    getaskInfoLs() {
      return function(list) {
        if (!list || !list.length) {
          return undefined;
        }
        return list.find(item => item.taskStatus == "2");
      };
    },
    newList() {
      const sliceNumber = this.screenWidth ? 12 : 8;
      // 定义结果数组
      const newList = [];
      // 循环遍历输入数组，每四个元素拆分成一个子数组
      for (let i = 0; i < this.resultArray.length; i += sliceNumber) {
        const subArray = this.resultArray.slice(i, i + sliceNumber);
        newList.push(subArray);
      }
      return newList;
    },
    toHoursAndMinutes() {
      return function(totalMinutes) {
        // console.log("totalMinutes :>> ", totalMinutes);
        if (!totalMinutes) {
          return "--";
        }
        const hours = Math.floor(totalMinutes / 60);
        const minutes = totalMinutes % 60;
        if (!hours && !minutes) {
          return "--";
        }
        return hours + "h" + minutes + "min";
      };
    },
    tempCount() {
      return function(count) {
        let c = count == "0" || !count ? 1 : Number(count);
        return c;
      };
    },
    statusText() {
      return function(status) {
        return DEVICE_STATE.find(f => f.value == status)?.label || "--";
      };
    },
    statusColor() {
      return function(status) {
        return DEVICE_STATE.find(f => f.value == status)?.color || "#929292";
      };
    },
    screenWidth() {
      return window.screen.width >= 1920;
    }
  },
  data() {
    return {};
  },

  async mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.dev_card_list {
  padding: 0 20px;
  /deep/ {
    .el-carousel__container {
      height: 100% !important;
      .el-carousel__arrow {
        background-color: rgba(0, 255, 174, 0.5);
      }
    }
    .el-steps {
      padding: 10px;
      justify-content: center;
      .el-step__line {
        background-color: #73f8fd;
      }
      .el-step__head.is-process {
        border-color: #427ecb;
        color: #fff;
      }
      .el-step__icon {
        background-color: #0b165d;
      }
    }
    .dv-percent-pond text {
      font-size: 16px;
    }
  }

  .dev_card_item {
    border: 2px solid #2f448c;
    box-shadow: 0 0 12px #0b186c, 0 0 22px #0b186c inset;
    border-radius: 10px;
    padding: 6px 10px;
    width: 100%;
    overflow: auto;
    &::-webkit-scrollbar-track {
      background-color: inherit;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #5dcbff;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    &::-webkit-scrollbar {
      width: 4px !important;
    }
    &::-webkit-scrollbar-corner {
      /* background-color: #5dcbff; */
      display: none;
    }
    .status_text {
      white-space: nowrap;
    }
    .dev_card_item_task_text {
      font-size: 12px;
      @include textoverflow(1);
    }
    .dev_card_content {
      width: 100%;
      margin: 10px 0;
      .dev_card_content_item {
        background-color: #052e7f;
        border-radius: 6px;
        height: 100%;
        width: 23%;
        padding: 12px 0;
        div {
          font-size: 16px;
          font-weight: bold;
        }
        .dev_card_content_item_icon {
          width: 22px;
          height: 22px;
          min-width: 22px;
          min-height: 22px;
          margin-bottom: 10px;
        }
      }
    }
    .dev_card_title_box {
      .dev_card_title {
        @include textoverflow(1);
        color: #00eaff;
        font-weight: bold;
        font-size: 18px;
        margin-right: 10px;
      }
      .dev_card_state {
        font-size: 14px;
        height: 24px;
        padding: 0 14px;
        border: 1px solid #00ffae;
        border-radius: 6px;
        .dev_card_state_dot {
          width: 12px;
          height: 12px;
          background-color: #00ffae;
          border-radius: 50%;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
